<template>
  <div class="div1">
    <div class="div" v-show="mima">
      <p>账号登陆</p>
      <div>
        <img
          src="../assets/images/login_erweima_icon.png"
          class="icon"
          @click="dianji"
        />
      </div>
      <el-form status-icon class="demo-ruleForm">
        <el-input
          prefix-icon="el-icon-user"
          type="text"
          placeholder="账号"
          v-model="denglu.zhanghao"
        >
        </el-input>
        <el-input
          prefix-icon="el-icon-lock"
          type="password"
          placeholder="密码"
          show-password
          v-model="denglu.zhangmima"
        ></el-input>
        <span @click="wangji">忘记密码</span>
        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="div" v-show="erweima">
      <p>扫码登陆</p>
      <i class="el-icon-monitor icon" @click="dianji"></i>
      <img src="../assets/images/login_erweima.png" alt="" />
      <span style="text-align: center; font-size: 20px"
        >请打开移动端应用扫一扫登录</span
      >
    </div>
    <div class="div" id="wangji" v-show="wang">
      <p>忘记密码</p>
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="70px"
        class="demo-ruleForm"
      >
        <el-form-item label="电话号码">
          <el-input
            type="text"
            v-model="ruleForm.phone"
            autocomplete="off"
            @input="zhengjeNum"
          ></el-input>
        </el-form-item>
        <el-form-item label="验证码" v-show="!cang">
          <el-input type="text" v-model="ruleForm.yanzheng" autocomplete="off">
            <el-button
              slot="append"
              id="huoquyanzheng"
              @click="huoqu"
              :disabled="yanzhengBtn"
              >获取  {{ count }} </el-button
            >
          </el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass" v-show="cang">
          <el-input
            type="password"
            v-model="ruleForm.pass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass" v-show="cang">
          <el-input
            type="password"
            v-model="ruleForm.checkPass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="reset" v-show="!cang"
            >确定</el-button
          >
          <el-button
            type="primary"
            @click="submitForm('ruleForm')"
            v-show="cang"
            >提交</el-button
          >
          <el-button @click="back">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from "@/utils/http";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      denglu: {
        zhanghao: "",
        zhangmima: "",
      },
      // wangjimima: {
      //   phone: "",
      //   xin: "",
      //   jiu: "",
      // },
      wang: false,
      mima: true,
      erweima: false,
      yanzhengma: "",
      yanzhengBtn: true,
      count: "",
      timer: null,
      cang: false, //验证密码框隐藏
      ruleForm: {
        pass: "",
        checkPass: "",
        phone: "",
        yanzheng: "",
        // age: "",
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
      },
    };
  },
  methods: {
    // 验证号码
    zhengjeNum: function () {
      let re = /^1\d{9}$/; //正则表达式
      if (re.test(this.ruleForm.phone)) {
        //判断字符是否是11位数字
        this.yanzhengBtn = false;
      } else {
        this.yanzhengBtn = true;
      }
    },
    //获取验证码
    huoqu: function () {
      this.yanzhengma = Math.ceil(Math.random() * (1999 - 1000) + 1000);
      this.$notify.info({
        title: "验证码",
        message: "验证码为" + this.yanzhengma,
        duration: 60000,
      });
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.yanzhengBtn = true;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.yanzhengBtn = false;
            clearInterval(this.timer);
            this.timer = null;
            this.count=''
          }
        }, 1000);
      }
    },
    dianji() {
      this.mima = !this.mima;
      this.erweima = !this.erweima;
    },
    wangji() {
      this.wang = true;
      this.mima = false;
      this.erweima = false;
    },
    back() {
      this.wang = false;
      this.mima = true;
      this.erweima = false;
      this.yanzhengBtn = true;
      this.cang = false;
      this.ruleForm.pass = "";
      this.ruleForm.checkPass = "";
      this.ruleForm.yanzheng = "";
    },
    login() {
      axios({
        url: "/login/get",
        method: "get",
        params: {
          account: this.denglu.zhanghao,
          password: this.denglu.zhangmima,
        },
      }).then((res) => {
        // console.log(res);
        // console.log(res.data[0]);
        if (res.data.code == 200) {
          this.$message({
            message: "登录成功！",
            type: "success",
          });
          this.$router.push("/home");
          this.$store.commit("setName", res.data.data[0]);
          sessionStorage.setItem("user", JSON.stringify(res.data.data[0]));
          sessionStorage.setItem("token", res.data.token);
        } else {
          this.$message.error("账号或密码错误！");
        }
      });
    },
    reset: function () {
      if (this.ruleForm.yanzheng == this.yanzhengma) {
        this.cang = true;
      } else {
        this.$message.error({ message: "验证码错误", duration: "5000" });
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios({
            url: "/login/edit",
            method: "post",
            data: {
              phone: this.ruleForm.phone,
              jiu: this.ruleForm.pass,
            },
          }).then((res) => {
            if (res.data.code == 200) {
              this.$message({
                message: "修改成功！！！",
                type: "success",
              });
            }
          });
        } else {
          this.$message({
            message: "两次输入的密码不一致！",
            type: "warning",
          });
          return false;
        }
      });
    },
  },
};
</script>
<style scoped>
#huoquyanzheng {
  height: 20px;
  margin: 0;
  padding: 0;
}
.div1 {
  background: url("../assets/images/login_bg.jpg");
  width: 100%;
  height: 100vh;
  background-size: cover;
}
.div {
  width: 25%;
  position: absolute;
  left: 50%;
  top: 20%;
  margin-left: -12.5%;
  background: rgba(255, 255, 255, 0.4);
  padding: 10px 30px;
  box-sizing: border-box;
  color: #fff;
}
.div > p {
  border-bottom: 1px solid #fff;
  padding: 10px 0;
  margin-bottom: 30px;
}
.el-input {
  margin: 10px 0;
}
.icon {
  position: absolute;
  right: 5%;
  top: 5%;
  font-size: 30px;
}
.el-button {
  width: 100%;
  margin-top: 30px;
}
.div span {
  color: rgb(102, 177, 255);
  display: block;
  border-top: 1px solid #fff;
  padding: 10px 0;
  margin-top: 30px;
  box-sizing: border-box;
  width: 100%;
  cursor: pointer;
}
.div > img {
  width: 100%;
  padding: 10px 60px;
  box-sizing: border-box;
}
.wangjidiv {
  width: 40%;
  margin-left: 6%;
}
.el-form-item {
  margin-bottom: 10px;
}
#wangji .el-button {
  width: 35%;
}
</style>
